<template>
  <div>
    <!-- 那些大咖选择我们 -->
    <div class="bigShot">
      <div class="bigShot_top">
        <h2>有哪些行业大咖选择我们</h2>
        <p>我们追求完美的创意设计和用户体验，更关注您的满意</p>
      </div>
      <div class="bigShot_bot">
        <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
          <ul class="item">
            <li v-for="(item,index) in newsList" :key="index">
              <img :src="item.src" alt="">
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: [
        {
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo01.png'
        },
        {
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo02.png'
        },
        {
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo03.png'
        },
        {
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo04.png'
        },
        {
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo05.png'
        },
        {
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo06.png'
        },
        {
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo07.png'
        },
        {
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo08.png'
        },
        {
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo09.png'
        },
        {
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo10.png'
        },
        {
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo11.png'
        },
        {
          src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/tb/logo12.png'
        }
      ]
    }
  },
  computed: {
    optionLeft() {
      return {
        direction: 2,
        limitMoveNum: 6,
        hoverStop: true, //是否开启鼠标悬停stop
        openWatch: true, //开启数据实时监控刷新dom
        singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 //单步运动停止的时间(默认值1000ms)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.bigShot {
  width: 100%;
  height: 500px;
  position: relative;
  z-index: 16;
  background-color: #fff;

  .bigShot_top {
    width: 100%;
    height: 180px;
    // background-color: red;
    overflow: hidden;
    border-bottom: 1px solid #f8f8f8;

    h2 {
      font-size: 50px;
      color: #333333;
      text-align: center;
      margin-top: 40px;
    }

    p {
      margin-top: 34px;
      color: #666666;
      font-size: 18px;
      text-align: center;
    }
  }

  .bigShot_bot {
    width: 100%;
    height: 280px !important;
    // background-color: pink;
    position: relative;

    .seamless-warp2 {
      overflow: hidden;
      height: 190px;
      width: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%); // >div>div {
      //   float: left !important;
      // }

      ul.item {
        float: left;
        width: 100%;

        li {
          width: 231px;
          height: 147px;
          box-shadow: 0px 0px 20px 0px rgba(230, 230, 230, 0.75);
          border-radius: 10px;
          float: left;
          margin-right: 10px;
          position: relative;
          margin: 30px;

          img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1199px) {
  .bigShot {
    display: none;
  }
}
</style>